<template>
  <div class="content">
    <div class="login-form-box">
      <el-form :model="editForm" ref="editForm">
        <el-form-item>
          <span>用户登录</span>
        </el-form-item>
        <el-form-item>
          <el-input v-model="editForm.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item class="password-item">
          <el-input v-model="editForm.password" placeholder="密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox-group class="remember" v-model="check">
            <el-checkbox  label="记住密码" name="check"></el-checkbox>
          </el-checkbox-group>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  name: "login",
  data () {
    return{
      editForm: {
        username: '',
        password: '',
      },
      check: true
    }
  },
  methods:{
    submitLogin() {
      let username = this.editForm.username
      let password = this.editForm.password
      if (username === '' && password === '') {
        this.open4()
      } else {
        let data = Qs.stringify({username, password})
        console.log('data', data)
        axios({
          method: 'post',
          url: '/api/eqLogin',
          data
        }).then((response) => {
          console.log(response.data)
          console.log(response)
          if(response.status === 200 && response.data === true) {
            this.open2()
            console.log(response.data)
            setTimeout(() => {
              this.$router.push({path: '/Home/homepage'})
            }, 2000)
            this.$emit('lander', this.editForm.username, this.editForm.password)
          } else {
            console.log('登录失败')
          }
        })
      }
    },
    open2() {
     this.$message({
       message: '登录成功',
       type: 'success'
     })
    },
    open4() {
      this.$message.error('请填写正确的信息')
    }
  }
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 720px;
  z-index: 1000;
  background-image: url('../../static/bg.gif');
  background-size: 100% 100%;
  .login-form-box{
    height: 280px;
    width: 400px;
    padding:30px;
    background-color: white;
    box-shadow: 0 0 6px 5px #DCDCDC;
    border-radius: 4px;
    position: absolute;
    left: 47%;
    top: 40%;
    margin-left: -200px;
    margin-top: -140px;
    span{
        font-family: Arial;
        font-weight: bold;
      }
    }
    .password-item{
      margin-bottom: 5px;
    }
    .remember{
      float: left;
    }
}
</style>
